<template>
    <div style="height:100%;" ref="weChatRef">
        <transition name="el-zoom-in-center" style="height:100%;">
            <div v-show="!showMessage" style="height:100%;z-index:1000000;">
                                  <div class="headerWX" ref="headerWxRef">
                            <div style="text-align: center;font-weight: bold;font-size: 15px;">{{ titleName }}</div>
                            <div v-if="titleName=='微信'"   style="display: inline-block;padding:0 10px;margin-top:5px;width:85%;"><el-input  :disabled="showInpruWeChat" v-model="searchWord" @keyup.enter.native="onSearchStart1" clearable  :placeholder="$t('wechat.wechat')"></el-input></div>

                            <div v-if="titleName=='群组'"  style="display: inline-block;padding:0 10px;margin-top:5px;width:85%;"><el-input v-model="searchWord1" @keyup.enter.native="onSearchStart2" clearable  :placeholder="$t('wechat.qun')"></el-input></div>
                            <div v-if="titleName=='公众号'"  style="padding:0 10px;margin-top:5px;"><el-input v-model="searchWord2" @keyup.enter.native="onSearchStart3" clearable  :placeholder="$t('wechat.public')"></el-input></div>
                            <el-button v-if="titleName=='公众号' || titleName=='群组'|| titleName=='微信'"  type="text" :icon="searchIcon" @click="openSearchAllBox()">{{ searchText }}</el-button>
                            <div v-if="titleName=='公众号' || titleName=='群组'|| titleName=='微信'" style="margin-top:20px;margin-left:10px;">

                                <div style="display: inline-block;margin-bottom:15px;">
                                <el-date-picker
                                popper-class="dateDown"
                                align="center"
                                    v-model="searchStartTime"
                                    style="width: 125px;"
                                    type="datetime"
                                    :append-to-body="false"
                                    value-format="timestamp"
                                    :placeholder="$t('wechat.statarTime')">
                                </el-date-picker>
                                <el-date-picker
                                popper-class="dateDown"
                                align="center"
                                    v-model="searchEndTime"
                                    style="width: 125px;margin-left:20px;"
                                    value-format="timestamp"
                                    type="datetime"
                                    :append-to-body="false"
                                    :placeholder="$t('wechat.endTime')">
                                </el-date-picker>
                            </div>
                            <div>
                                <el-button style="margin-left:10px;" type="primary"  @click="searchFunctionInit()" size="mini">{{$t('wechat.searchKey')}}</el-button>
                                <el-button style="margin-left:10px;"  @click="formateDataFrom()" size="mini">{{$t('wechat.rush')}}</el-button>
                            </div>
                            <div style="display: inline-block;margin-bottom: 15px;margin-top:15px;margin-right:0;">
                                <span>{{$t('wechat.sort')}} ：</span>
                                <el-radio-group v-model="formType" @change="showDetList()">
                                <el-radio :label="$t('wechat.details')"></el-radio>
                                <el-radio :label="$t('wechat.reverseOrder')"></el-radio>
                                <el-radio :label="$t('wechat.delNumber')"></el-radio>
                                <el-radio :label="$t('wechat.msgNumber')"></el-radio>
                                </el-radio-group>
                                <div>
                                <span>{{$t('wechat.ruls')}} ：</span>
                                <el-radio-group v-model="msgNum" @change="showFriendListSS()">
                                <el-radio :label="$t('wechat.details')"></el-radio>
                                <el-radio :label="$t('wechat.nothingMsg')"></el-radio>
                                </el-radio-group>
                            </div>

                            </div>
                        </div>
                        </div>
                <!-- wx联系人 -->
                    <div v-if="show" class="contentBoxWx" @scroll="throttleFn" ref="lianxiren">
      
                        <!-- 聊天对象列表 -->
                        <div v-show="titleName=='微信'"  class="wxUserItem" v-for="(item,index1) in friendListData" :key="index1" @click="opemMessageDetials(item,0)">
                            <img  @click.stop="openContantInfo(item)" style="border-radius: 10px;margin-left:10px;cursor: pointer;" v-lazy-img="item.avatar?item.avatar:srcLogo" width="55" height="55" alt="头像">
                            <div style="margin-left: 10px;width: 221px;">
                                <div class="textwx" style="font-weight: bold;" :title="item.nick + '('+item.remark+')'"><span v-if="item.nick">{{ item.nick }}</span><span v-if="item.remark">({{ item.remark }})</span></div>
                                <div class="textwx" style="color: #bdbdbd;margin-top: 5px;">
                                    <span v-if="item.msgType==1" :title="item.lastContent">{{ item.lastContent }}</span>
                                    <span v-else>{{$t('wechat.otherMsg')}}</span>
                                </div>
                            </div>
                            <div class="dateTime">{{$t('wechat.number')}}:{{item.cnt}} <span style="color:red;" @click.stop="opemMessageDetials(item,1)">({{ item.delCnt }})</span>
                                <br>
                            <!-- <div @click.prevent.stop="friendModel(item)" class="pengyouquan" :title="'点击查看'+item.nick+'的朋友圈'" style="display:flex;align-items: center;float: right;height: 30px;"><img width="16" height="16" style="margin-right:5px;" src="../../../assets/wxQuan.png" alt=""> 朋友圈</div> -->
                        </div>
                        </div>
                        <div v-show="titleName=='群组'" class="wxUserItem" v-for="(item,index2) in friendListData1" :key="index2" @click="opemMessageGroupDetials(item,0)">
                            <img @click.stop="openContantInfo(item)" style="border-radius: 10px;margin-left:10px;" src="../../../assets/images/wechatFriend.png" width="55" height="55" alt="">
                            <div style="margin-left: 10px;width: 221px;">
                                <div class="textwx" style="font-weight: bold;" :title="item.groupnick+'('+item.groupname+')'"><span v-if="item.groupnick">{{ item.groupnick }}</span><span v-if="item.groupname">({{ item.groupname }})</span></div>
                                <div class="textwx" style="color: #bdbdbd;margin-top: 5px;">
                                    <span v-if="item.msgType==1">{{ item.lastContent }}</span>
                                    <span v-else>{{$t('wechat.otherMsg')}}</span></div>
                            </div>
                            <div class="dateTime">{{$t('wechat.number')}}:{{item.cnt}} <span style="color:red;" @click.stop="opemMessageGroupDetials(item,1)">({{ item.delCnt }})</span></div>
                        </div>
                        <div v-if="titleName=='公众号'" class="wxUserItem" v-for="(item,index3) in friendListData2" :key="index3" @click="viewsPublicMessage(item,0)">
                            <img @click.stop="openContantInfo(item)" style="border-radius: 10px;margin-left:10px;" :src="item.avatar?item.avatar:srcLogo" width="55" height="55" alt="">
                            <div style="margin-left: 10px;width: 221px;">
                                <div class="textwx" style="font-weight: bold;" :title="item.nick+'('+item.username+')'"><span v-if="item.nick">{{ item.nick }}</span><span v-if="item.username">({{ item.username }})</span></div>
                                <div class="textwx" style="color: #bdbdbd;margin-top: 5px;">
                                    <span v-if="item.msgType==1">{{ item.lastContent }}</span>
                                    <span v-else>{{$t('wechat.otherMsg')}}</span></div>
                            </div>
                            <div class="dateTime">{{$t('wechat.number')}}:{{item.cnt}} <span style="color:red;" @click.stop="viewsPublicMessage(item,1)">({{ item.delCnt }})</span></div>
                        </div>
                                                <div class="loadingBox" v-if="showLoading" style="color:#2196f3;text-align: center;margin-bottom:30px;position:relative;z-index:100;"><i :class="loadClass" style="color:#2196f3;margin-top: 30px;margin-bottom:30px;"></i> {{ loadingText }}</div>
                        <!-- <div class="loadingBox" v-if="showLoading" style="color:#2196f3;text-align: center;margin-top:20px;margin-bottom:20px;"><i :class="loadClass" style="color:#2196f3;margin-top: 30px;margin-bottom:30px;"></i> {{ loadingText }}</div> -->
                    </div>
                <!-- wx我的 -->
                <div v-show="!show" class="contentBoxWx">
                    <div class="selfInfo">
                        <img :src="accountData.avatar" style="border-radius: 5px;" width="70" height="70" alt="">
                        <div class="" style="margin-left:15px;">
                            <div style="font-size:20px;margin-bottom:5px;font-weight: bold;">{{ accountData.nick }}</div>
                            <div>{{$t('wechat.wechatAccount')}}:{{ accountData.alias?accountData.alias:accountData.username }}</div>
                            <div>{{$t('wechat.region')}}：{{ accountData.province+'-'+accountData.city}}</div>
                            <div>{{$t('wechat.phone')}}：{{ accountData.phone}}</div>
                        </div>
                    </div>
                    <div class="list" style="margin-top:20px;">
                        <div :title="$t('wechat.qianm')+accountData.signature" style="padding-right:10px;height:50px;border-bottom: 1px solid #ededed;line-height: 50px;border-top: 1px solid #ededed;overflow: hidden; text-overflow: ellipsis;white-space: nowrap; "><i class="el-icon-edit-outline"></i> 签名：{{ accountData.signature }}</div>
                        <div style="height:50px;border-bottom: 1px solid #ededed;line-height: 50px;"><img style="margin-right: 10px;" src="../../../assets/friendWx.png" width="20" height="20" alt=""> 好友数量 ({{accountData.friend_totle}})</div>
                        <div style="height:50px;border-bottom: 1px solid #ededed;line-height: 50px;"><img style="margin-right: 10px;" src="../../../assets/qun.png" width="20" height="20" alt=""> 群聊数量 ({{ accountData.group_totle }})</div>
                        <div style="height:50px;border-bottom: 1px solid #ededed;line-height: 50px;"><img style="margin-right: 10px;" src="../../../assets/publicAcc.png" width="20" height="20" alt=""> 公众号数量 ({{ accountData.public_totle }})</div>
                        <!-- <div class="shouCang" style="height:50px;border-bottom: 1px solid #ededed;line-height: 50px;cursor: pointer;display: flex;align-items: center;" title="点击查看收藏"><img style="margin-right: 10px;" src="../../../assets/wxQuan.png" width="20" height="20" alt=""> 朋友圈 </div>
                        <div class="shouCang" style="height:50px;border-bottom: 1px solid #ededed;line-height: 50px;cursor: pointer;display: flex;align-items: center;" title="点击查看收藏"><img style="margin-right: 10px;" src="../../../assets/storeIco.png" width="20" height="20" alt=""> 收藏 </div> -->
                    </div>
                </div>
                

                <div class="flooterBox" >
                <div class="btn2" @click="openContent('微信')">
                    <img :src="src" width="45" height="45" alt="">
                </div>
                <div class="btn2" @click="openContent('群组')" >
                    <img :src="srcQun"  width="45" height="45" alt="">
                </div>
                <div class="btn2" @click="openContent('公众号')">
                    <img :src="srcPublic"  width="45" height="45" alt="">
                </div>
                <div class="btn2" @click="openContent('我的')">
                    <img :src="srcSelf"  width="45" height="45" alt="">
                </div>
            </div>
            </div>
        </transition>
        <transition name="el-zoom-in-center" style="height:100%;">
            <!-- 聊天内容 -->
            <div v-show="showMessage" style="height:100%;">
                <div class="headerMessage" v-show="!showSearchList">
                    <div style="font-weight: bold;margin-left: 10px;cursor: pointer;" @click="black()"><i class="el-icon-arrow-left"></i></div>
                    <div v-if="titleName=='微信'" style="width: 70%;text-align: center;font-weight: bold;">{{chatWithObj.remark?chatWithObj.remark:chatWithObj.nick}}</div>
                    <div v-if="titleName=='群组'" style="width: 66%;text-align: center;font-weight: bold;font-size:14px;">{{chatWithObj.groupnick?chatWithObj.groupnick:chatWithObj.groupname}}</div>
                    <div v-if="titleName=='公众号'" style="width: 86%;text-align: center;font-weight: bold;">{{chatWithObj.nick?chatWithObj.nick:chatWithObj.username}}</div>
                    <div v-if="titleName=='群组'" style="cursor: pointer;" title="群成员" @click="viewsQunCY(chatWithObj)"><svg width="30" height="30" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="14" cy="29" r="5" fill="#70b3f6" stroke="#70b3f6" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/><circle cx="34" cy="29" r="5" fill="#70b3f6" stroke="#70b3f6" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/><circle cx="24" cy="9" r="5" fill="#70b3f6" stroke="#70b3f6" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/><path d="M24 44C24 38.4772 19.5228 34 14 34C8.47715 34 4 38.4772 4 44" stroke="#70b3f6" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/><path d="M44 44C44 38.4772 39.5228 34 34 34C28.4772 34 24 38.4772 24 44" stroke="#70b3f6" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/><path d="M34 24C34 18.4772 29.5228 14 24 14C18.4772 14 14 18.4772 14 24" stroke="#70b3f6" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/></svg></div>
                    <div v-if="titleName!=='公众号'" class="searchWX" :title="$t('wechat.searchKey')" ref="showSearchIcon" @click="openSearch" ><i class="el-icon-search"></i></div>
                    <el-button v-if="titleName!=='公众号'" type="text" @click="openPrint()" icon="el-icon-printer">打印</el-button>
                    <transition name="el-zoom-in-top">
                        <div v-show="showSearchBox" ref="myDiv" class="searchWXContent">
                            <el-input class="searchInputWX" v-model="messageSearchWord"  @keyup.enter.native="searchWeChatMessage()" placeholder="输入关键词按回车键搜索聊天内容"></el-input>
                        </div>
                    </transition>
                </div>
                <!-- 内容区 -->
                <div v-show="!showSearchList" style="height:100%;">
                    <weChatMessage ref="wechatBox" v-if="titleName=='微信'" :chatWithObj="chatWithObj" :recovery="recovery" :accountData="accountData" :offsetLimit='offsetLimit' :contantData="contantData" />
                    <weChatGroup ref="wechatGroupBox" v-if="titleName=='群组'" :chatWithObj="chatWithObj" :recovery="recovery" :accountData="accountData" :offsetLimit='offsetLimit' :contantData="contantData"/>
                    <wechatpublic ref="wechatPublicBox" v-if="titleName=='公众号'" :chatWithObj="chatWithObj" :recovery="recovery" :accountData="accountData" :offsetLimit='offsetLimit' :contantData="contantData"/>
                </div>
                <div v-if="showSearchList" style="padding:0 10px;">
                    <div class="headerMessage">
                    <div style="font-weight: bold;margin-left: 10px;cursor: pointer;" @click="blackMessageList()"><i class="el-icon-arrow-left"></i></div>
                    <div v-if="titleName=='微信'" style="width: 86%;text-align: center;font-weight: bold;">{{$t('wechat.searchMsgConetnt')}}</div>
                </div>
                <!-- 搜索内容区 -->
                <div class="searchContentBox" ref="searchContentInRef">
                    <div class="remarkListItem" @click="flyRemarkMessageItem(item)" v-for="(item,indexSearch) in searchMessageListData" :key="indexSearch">
                        <div v-if="titleName=='微信'">
                            <img v-if="item.issend==0" :src="item.contactavatar" alt="" width="50" height="50">
                            <img v-else-if="accountData.avatar" :src="accountData.avatar" alt="" width="50" height="50">
                        </div>
                        <div v-if="titleName=='群组'">
                            <img src="../../../assets/images/wechatFriend.png" alt="" width="50" height="50">
                        </div>
                        <div style="width:300px;padding-left:10px;">
                            <div style="color:#bdbdbd;position: relative;">
                                <span style="width:210px;display: inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; ">{{ item.sendernick?item.sendernick:item.sendername }} </span>
                                <span style="position: absolute;right:0px;top: 20px;">
                                    {{ formateDate(item.msgtime) }}
                                </span>
                            </div>
                            <div style="height:30px;line-height: 40px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" :title="item.contant" v-html="highlight(item.contant,messageSearchWord)"></div>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </transition>

    <a-modal
    :maskClosable="false"
    :getContainer="getRefsAff" v-model="visibleGroup" width="80%" :title="$t('wechat.qunnchengyuan')">
           <div style="padding:0 2.5%">
            <a-input-search :placeholder="$t('wechat.searckKey')" v-model="searchkeyModal" style="width: 200px;margin-bottom:10px;float:right;" @search="initQunList" />
        </div>
       <el-table
    :data="tableData"
    height="60vh"
    border
    style="width: 100%">
    <el-table-column
      prop="username"
      :label="$t('wechat.account')"
      >
    </el-table-column>
    <el-table-column
      prop="nickname"
      :label="$t('wechat.username')"
      >
    </el-table-column>
  </el-table>
   <div class="block">
  </div>
    </a-modal>
<!-- 好友全局搜索结果展示 -->
    <a-modal
    :closable="false"
    :maskClosable="false"
    v-if="searchWxShow"
    :getContainer="getRefsAff" v-model="searchWxShow" width="90%" title="好友搜索结果展示">
    <div ref="searchListRef" class="a_modalClass" style="height:600px;overflow-y: auto;">
      <el-tabs v-model="activeName" >
        <el-tab-pane :label="$t('wechat.contacts')" name="first">
          <div v-if="searchAllListContant.length == 0" style="color:#ccc;margin-left:10px;">{{$t('wechat.notData')}}</div>
          <div v-if="searchAllListContant.length > 0" class="wxUserItem" v-for="(d,j) in searchAllListContant"  @click="opemMessageDetials(d,0,1,true)">
            <img @click.stop="openContantInfo(d)" style="border-radius: 10px;margin-left:10px;" v-lazy-img="d.avatar?d.avatar:srcLogo" width="55" height="55" alt="头像">
            <div style="margin-left: 10px;width: 221px;">
              <div class="textwx" style="font-weight: bold;"><span v-if="d.nick">{{ d.nick }}</span><span v-if="d.remark">({{ d.remark }})</span></div>
              <div class="textwx" style="color: #bdbdbd;margin-top: 5px;">
                <span v-if="d.cnt">{{$t('wechat.total')}}：{{ initNumberSear(d.cnt) }}</span><span style="color:red;">（{{ d.delCnt }}）</span>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('wechat.msgXiangGuan')" name="second">
          <div v-if="searchAllListContent.length == 0" style="color:#ccc;margin-left:10px;">{{$t('wechat.notData')}}</div>
          <div v-if="searchAllListContent.length > 0" v-for="(item,k) in searchAllListContent" @click="searchDetailsListData(item,true)" :key="k" style="" class="remarkListItem">
            <div v-if="titleName=='微信'">
              <img @click.stop="openContantInfo(item)" v-lazy-img="item.avatar==''?srcLogo:item.avatar" alt="" width="50" height="50">
            </div>
            <div v-if="titleName=='群组'">
              <img src="../../../assets/images/wechatFriend.png" alt="" width="50" height="50">
            </div>
            <div style="width:300px;padding-left:10px;">
              <div style="color:#bdbdbd;position: relative;">
                <span style="width:210px;display: inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; ">{{ item.nick?item.nick:item.username }}</span>
                <span style="position: absolute;right:0px;">
                        {{ formateDate(item.msgtime) }}
                    </span>
              </div>
              <div style="height:30px;line-height: 40px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" >{{ item.keyMsgCnt }}条相关</div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <template slot="footer">
      <a-button @click="searchWxShow=false">{{$t('wechat.close')}}</a-button>
    </template>
    </a-modal>
<!-- 群搜索结果展示 -->
    <a-modal
    :closable="false"
    :maskClosable="false"
    :getContainer="getRefsAff" v-model="searchQun" width="90%" :title="$t('wechat.qunSearchjieg')">
    <div ref="qunSearchRef" class="a_modalClass" style="height:600px;overflow-y: auto;">
        <div>{{$t('wechat.group')}}</div>
        <div v-if="searchAllListContantQ.length == 0" style="color:#ccc;margin-left:10px;">{{$t('wechat.notData')}}</div>
        <div v-if="searchAllListContantQ.length > 0" class="wxUserItem" v-for="(d,j) in searchAllListContantQ"  @click="opemMessageDetials(d,0)">
            <img @click.stop="openContantInfo(d)" style="border-radius: 10px;margin-left:10px;" v-lazy-img="d.avatar?d.avatar:srcLogo" width="55" height="55" alt="头像">
            <div style="margin-left: 10px;width: 221px;">
                <div class="textwx" style="font-weight: bold;"><span v-if="d.groupnick">{{ d.groupnick }}</span></div>
                <div class="textwx" style="color: #bdbdbd;margin-top: 5px;">
                    <span v-if="d.lastContent">({{ d.lastContent }})</span>
                </div>
            </div>
        </div>
        <div>聊天记录相关</div>
        <div v-if="searchAllListContentQ.length == 0" style="color:#ccc;margin-left:10px;">{{$t('wechat.notData')}}</div>
        <div v-if="searchAllListContentQ.length > 0" v-for="(item,index) in searchAllListContentQ" @click="searchDetailsListDataQun(item)" style="" class="remarkListItem">
            <div v-if="titleName=='微信'">
                <img @click.stop="openContantInfo(item)" v-if="item.issend==0" v-lazy-img="item.contactavatar" alt="" width="50" height="50">
                <img @click.stop="openContantInfo(item)" v-else-if="accountData.avatar" v-lazy-img="accountData.avatar" alt="" width="50" height="50">
            </div>
            <div v-if="titleName=='群组'">
                <img @click.stop="openContantInfo(item)" src="../../../assets/images/wechatFriend.png" alt="" width="50" height="50">
            </div>
            <div style="width:300px;padding-left:10px;">
                <div style="color:#bdbdbd;position: relative;">
                    <span style="width:210px;display: inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; ">{{ item.groupnick?item.groupnick:item.groupname }}</span>
                    <span style="position: absolute;right:0px;">
                        {{ formateDate(item.msgtime) }}
                    </span>
                </div>
                <div style="height:30px;line-height: 40px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" >{{ item.keyMsgCnt }}{{$t('wechat.xiangguan')}}</div>
            </div>
        </div>
    </div>
    <template slot="footer">
        <a-button @click="searchQun = false">{{$t('wechat.close')}}</a-button>
    </template>
    </a-modal>

    <!-- 聊天对象账号信息 -->
    <a-modal
    :zIndex="1000000"
    :footer="null"
    :maskClosable="false"
    :getContainer="getRefsAff" :destroyOnClose="true" v-model="accountInfoDetailsShow" width="80%" :title="initModal()">
    <div style="display: flex;" v-if="titleName == '微信'">
        <img v-lazy-img="this.contantData.avatar" width="105" height="105" alt="">
        <div style="margin-left:15px;">
            <div>{{$t('wechat.username')}}：{{this.contantData.nick}}</div>
            <div>{{$t('wechat.account')}}：{{this.contantData.username}}</div>
            <div>{{$t('wechat.selfaccount')}}：{{this.contantData.alias}}</div>
            <div>{{$t('wechat.region')}}：{{this.contantData.province+' '+this.contantData.city}}</div>
            <div>{{$t('wechat.qianm')}}：{{this.contantData.signature}}</div>
            <div>{{$t('wechat.bangdingshouji')}}：{{this.contantData.phone}}</div>
            <div>{{$t('wechat.phone')}}：</div>
            <div style="width: 100px;margin-left: 50px;">{{this.contantData.fillInPhone}}</div>
            <div>
                <div v-if="this.contantData.sex==1">{{$t('wechat.sexMan')}}</div>
                <div v-else-if="this.contantData.sex==2">{{$t('wechat.sexWman')}}</div>
                <div v-else>{{$t('wechat.weizhi')}}</div>
            </div>
        </div>
    </div>
    <div style="display: flex;" v-if="titleName == '群组'">
        <div style="margin-left:15px;">
            <div>{{$t('wechat.username')}}：{{this.contantData.groupnick}}</div>
            <div>{{$t('wechat.account')}}：{{this.contantData.groupname}}</div>
            <div v-if="this.contantData.creatornick">{{$t('wechat.creatname')}}：{{this.contantData.creatornick}}</div>
            <div v-if="this.contantData.creatorname">{{$t('wechat.creatAccount')}}：{{this.contantData.creatorname}}</div>
            <div>{{$t('wechat.qunzhu')}}：{{this.contantData.ownernick}}</div>
            <div>{{$t('wechat.qunzhuaccount')}}：{{this.contantData.ownername}}</div>
            <div>{{$t('wechat.qunchengyuan')}}：{{this.contantData.membercount}}</div>
            <br>
            <div>{{$t('wechat.qungonggao')}}：{{this.contantData.signature}}</div>
        </div>
    </div>
    <div style="display: flex;" v-if="titleName == '公众号'">
        <img v-lazy-img="this.contantData.avatar" width="105" height="105" alt="">
        <div style="margin-left:15px;">
            <div>{{$t('wechat.username')}}：{{this.contantData.nick}}</div>
            <div>{{$t('wechat.account')}}：{{this.contantData.username}}</div>
            <div>{{$t('wechat.region')}}：{{this.contantData.province+' '+this.contantData.city}}</div>
            <div>{{$t('wechat.qianm')}}：{{this.contantData.signature}}</div>
        </div>
    </div>
    </a-modal>
        <!-- 聊天对象账号信息 -->
        <a-modal
        :zIndex="1000000"
        :footer="null"
        :maskClosable="false"
        style="padding:0 !important;"
        :getContainer="getRefsAff" :destroyOnClose="true" v-model="showFriendModel" width="100%" :title="friendTitle+$t('wechat.friendQuan')">
        <div class="" style="height:750px;overflow-y: auto;overflow-x:hidden;">
            <div  style="width:100%;height:200px;position: relative;">
                <img class="bgimgimg" style="-webkit-animation:kenburns-top 5s ease-out both;animation:kenburns-top 5s ease-out both" src="https://img2.baidu.com/it/u=1840828656,940167964&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=625" width="100%" height="100%" alt="">
                <img style="position: absolute;right:20px;bottom:-25px;width:70px;height:70px;border-radius:5px;" :src="friendData.avatar?friendData.avatar:srcLogo" alt="">
                <span style="position: absolute;right:100px;bottom:10px;color:#fff;font-size:18px;font-weight:1000;">{{ friendData.nick }}</span>
            </div>
            <div style="height: 800px;margin-top: 40px;">

                <div style="min-height: 40px;position: relative;">
                    <div style="display: flex;">
                        <img :src="friendData.avatar?friendData.avatar:srcLogo" width="50" height="50" style="border-radius: 5px;" alt="">
                        <div style="margin-left: 10px;font-size: 18px;color:#2c89d5;">{{ friendData.nick }}</div>
                    </div>
                    <!-- 文本 -->
                    <div style="width: 80%;min-height:20px;position: relative;left: 60px;top: -20px;font-size: 17px;color: #303030;letter-spacing: 2px;">要调整文本的字间距（字距），可以使用 CSS 的 letter-spacing 属性。这个属性允许你增加或减少字符之间的间距。
                    </div>
                    <div style="min-height: 200px;padding-left: 55px;display: flex;flex-wrap: wrap;padding-right: 22px;margin-bottom: 10px;">
                        <div style="margin-left: 9px;" class="demo-image__preview" v-for="(item,index) in srcList" :key="index">
                            <el-image 
                                style="width:100px; height: 100px"
                                :src="item" 
                                :preview-src-list="srcList">
                            </el-image>
                        </div>
                    </div>
                    <!-- 视频 -->
                    <!-- <div style="width:80%;min-height: 200px;padding-left: 60px;padding-right:20px;display: flex;flex-wrap: wrap;padding-right: 22px;margin-bottom: 10px;">
                        <video src="http://vjs.zencdn.net/v/oceans.mp4" width="315" height="500" controls style="object-fit: cover;"></video>
                    </div> -->
                    <!-- 单张图片 -->
                    <div style="min-height: 200px;padding-left: 55px;display: flex;flex-wrap: wrap;padding-right: 22px;margin-bottom: 10px;width:100%;">
                        <div style="margin-left: 7px;width: 100%;" class="demo-image__preview">
                            <el-image 
                                style="width:100%; height: 500px"
                                :src="onlyUrl" 
                                :preview-src-list="[onlyUrl]">
                            </el-image>
                        </div>
                    </div>
                    <!-- 小程序 -->
                    <div style="min-height: 100px;padding-left: 55px;display: flex;flex-wrap: wrap;padding-right: 22px;margin-bottom: 10px;width:100%;">
                        <div style="display: flex;align-items: center;">
                            <img src="../../../assets/otherother.png" width="50" height="50" alt="">
                            <div class="wxAppText">文字表述文字表述文字表述文字表述文字表述文字表述文字表述文字表述文字表述文字表述</div>
                        </div>
                        <div style="">程序名</div>
                    </div>

                    <div style="position: relative;margin-top: 5px;font-size: 15px;color: #a3a3a3;left: 60px;margin-bottom: 10px;">39分钟前</div>

                    <div style="position: relative;left:60px;min-height: 40px;background-color: #f3f3f3;width: 80%;border-radius: 5px;margin-bottom: 10px;padding: 8px;">
                        
                        <div style="font-size: 17px;margin-bottom: 10px;">
                            <img src="../../../assets/dianzan.png" width="20" height="20" alt="">
                            <span style="color:#2c89d5;"> 云遮夏靥、张浩、李林波、云遮夏靥、张浩、李林波</span>
                        </div>
                        
                        <div style="font-size: 17px;margin-top: 10px;"><span style="color:#2c89d5;">李林波:</span><span style="font-size: 17px;color: #303030;">吧啦吧啦吧啦吧吧啦吧啦吧啦吧吧啦吧啦吧啦吧吧啦吧啦吧啦吧</span></div>
                        <div style="font-size: 17px;margin-top: 10px;"><span style="color:#2c89d5;">李林波:</span><span style="font-size: 17px;color: #303030">吧啦吧啦吧啦吧吧啦吧啦吧啦吧吧啦吧啦吧啦吧吧啦吧啦吧啦吧</span></div>
                        <div style="font-size: 17px;margin-top: 10px;"><span style="color:#2c89d5;">云遮夏靥</span> 回复 <span style="color:#2c89d5;">李林波 :</span><span style="font-size: 17px;color: #303030">你疯了？</span></div>
                    </div>
                </div>
            </div>
        </div>
        </a-modal>
    </div>
</template>
<script>

import weChatMessage from './weChatMessage.vue'
import weChatGroup from './weChatGroupMessage.vue'
import wechatpublic from './weChatPublicMessage.vue'
import { throttle } from 'lodash';
import { parseTime } from '@/utils/index'
import { getWeChatAccountInfo,getAllSearchQunApi,getAllSearchApi,searchFunction,getWeChatGroup_number } from '@/api/weChat/weChat_api'

export default {
    props:['sendData'],
    name: "wechat",
    components:{
        weChatMessage,
        weChatGroup,
        wechatpublic
    },
    data(){
        return{
            onlyUrl:'https://img1.baidu.com/it/u=1894489640,257262556&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
            srcList:[
                'https://img1.baidu.com/it/u=1894489640,257262556&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
                'https://img2.baidu.com/it/u=2363900005,280886924&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
                'https://img0.baidu.com/it/u=1598850878,59814561&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
                'https://img1.baidu.com/it/u=1250510633,1329722166&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1083',
                'https://img1.baidu.com/it/u=1894489640,257262556&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
                'https://img2.baidu.com/it/u=2363900005,280886924&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
                'https://img0.baidu.com/it/u=1598850878,59814561&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
                'https://img1.baidu.com/it/u=1250510633,1329722166&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1083',
                'https://img2.baidu.com/it/u=600665927,4067896986&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'
            ],
            friendData:'',
            friendTitle:'朋友圈',
            showFriendModel:false,
            domParent:'',
            searchUser:false,
            activeName:'first',
            msgNum:'默认',
            searchStartTime:'',
            searchEndTime:'',
            showDel:0,
            searchText:'更多',
            searchIcon:'el-icon-arrow-down',
            formType:'默认',
            date123:null,
            imageUrl:require('../../../assets/logo.png'),
            showInpruWeChat:false,
            searchScrollTop:0,
            loadClass:'el-icon-loading',
            loadingText:'正在加载. . .',
            showLoading:false,
            showPrint:false,
            contantData:'',
            accountInfoDetailsShow:false,
            searchAllListContant:[],
            searchAllListContent:[],
            searchWxShow:false,
            searchAllListContantQ:[],
            searchAllListContentQ:[],
            searchQun:false,
            searchkeyModal:'',
            visibleGroup:false,
            tableData:[],
            selectld:-1,
            selectType:0, //0下1上
            selectTime:-1,
            isExistsSelectID:1,

            searchMessageListData:[],
            showSearchList:false,
            messageSearchWord:'',
            showSearchBox:false,
            loadClass:'el-icon-loading',
            loadingText:'正在加载. . .',
            showLoading:false,
            srcLogo:require('../../../assets/images/wechatFriend.png'),
            searchWord2:'',
            searchWord1:'',
            active:'微信',
            recovery:0,
            chatWithObj:'',
            accountData:'',
            friendListData:[],
            friendListData1:[],
            friendListData2:[],
            titleName:'微信',
            showMessage:false,
            show:true,
            searchWord:'',
            src:require('../../../assets/wechataction.png'),
            srcSelf:require('../../../assets/self.png'),
            srcQun:require('../../../assets/图标/微信加/微信群.png'),
            srcPublic:require('../../../assets/图标/微信加/微信公众号.png'),
             // 好友
            offset:1,
            limit:25,
            total:0,
            // 群组
            groupOffset:1,
            groupLimit:25,
            totalGroup:0,
            // 公众号
            publicOffset:1,
            publicLimit:25,
            publicTotal:0,

            // 群成员
            groupModalOffset:1,
            groupModalLimit:25,
            groupModalTotal:0,

            // --------------------
            offsetLimit:'',
            showSearchContentList:false,
            weChatContentShow:false,
            scrpllTopSearchContent:0,
        }
    },
    computed:{
		Obj(){
			return this.$store.state.account.weChat
		}
	},
    watch:{
        Obj(newVal,oldVal){
        // this.$refs.headerWxRef.style.height = '80px';
        this.searchText = '更多'
		if(this.sendData.list_offset){
        if(this.sendData.app_name=='好友'){
        this.searchWord = this.sendData.contact_username;
        
        this.openContent('微信')
          this.offset=1;
          this.limit=this.sendData.list_limit;
          
        }else if(this.sendData.app_name == '群组'){
            this.titleName = '群组'
        this.searchWord1 = this.sendData.contact_username;
          this.groupOffset=1;
          this.groupLimit=this.sendData.list_limit;
          this.openContent('群组')
        }else{
        }
      }else{
    this.offset=1
    this.offset=1
    this.total=0

    this.groupOffset=1
    this.totalGroup=0

    this.groupModalOffset=1
    this.groupModalTotal=0

    this.showSearchList = false;
    this.showSearchBox = false;
    this.showLoading = false;
    this.showMessage = false;
    this.show =true;

    this.searchWord = '';
    this.searchWord1 = '';
    this.searchWord2 = '';
    this.friendListData = []
    this.friendListData1 = []
    this.friendListData2 = []
    this.openContent('微信')
      }
		}
  },
  created(){
    this.domParent = this.$refs.weChatRef;
    if(this.sendData.list_offset){
        if(this.sendData.app_name=='好友'){
            this.searchWord = this.sendData.contact_username;
            this.openContent('微信')
            this.offset=1;
            this.limit=this.sendData.list_limit;
        }else if(this.sendData.app_name=='群组'){
            this.titleName = '群组'
            this.searchWord1 = this.sendData.contact_username;
            this.groupOffset=1;
            this.groupLimit=this.sendData.list_limit;
            this.openContent('群组')
        }else{
            console.log('wo d ')
        }
      }else{
        this.offset=1
        this.offset=1
        this.total=0

        this.groupOffset=1
        this.totalGroup=0

        this.groupModalOffset=1
        this.groupModalTotal=0

        this.showSearchList = false;
        this.showSearchBox = false;
        this.showLoading = false;
        this.showMessage = false;
        this.show =true;

        this.searchWord = '';
        this.searchWord1 = '';
        this.searchWord2 = '';
        this.friendListData = []
        this.friendListData1 = [];
        this.friendListData2 = [];
        this.openContent('微信');
    }
  },
  mounted() {
    document.addEventListener('click', this.handleClickOutside);
  },
  beforeDestroy() {
    document.removeEventListener('click', this.handleClickOutside);
  },
  methods:{
    initNumberSear(str){
        let inputStr = str;
        // 使用正则表达式查找括号及其内部的内容
        let match = inputStr.match(/\([^)]*\)/);

        if (match) {
            // 如果找到括号，则替换为空字符串
            let resultStr = inputStr.replace(match[0], '');
            return resultStr;
        } else {
            // 如果没有找到括号，则不进行任何更改
            return str
        }
    },
    friendModel(item){
        this.friendTitle = item.nick;
        this.friendData = item;
        this.showFriendModel = true;
    },
    openPrint(){
        switch (this.titleName) {
            case '微信':
            this.$refs.wechatBox.openPrintModel();
                break;
            case '群组':
            this.$refs.wechatGroupBox.openPrintModel();
                break;
            default:
                break;
        }
    },
    initModal(){
        switch (this.titleName) {
            case '微信':
                return '好友信息'
                break;
            case '群组':
                return '群信息'
                break;
            case '公众号':
                return '公众号信息'
                break;
            default:
                break;
        }
    },
    initFunctionDate(){

    },
    formateDataFrom(){
        this.offset = 1;
        this.searchStartTime = '';
        this.searchEndTime = ''
        this.searchWord = '';
        this.searchWord1 = '';

        if(this.titleName=='微信'){
            this.onSearchStart1()
        }else if(this.titleName=='群组'){
            this.onSearchStart2();
        }
    },
    searchFunctionInit(){
        if(this.titleName=='微信'){
            this.onSearchStart1()
        }else if(this.titleName=='群组'){
            this.onSearchStart2();
        }
    },
    showFriendListSS(){
        this.offset =1;
        this.groupOffset =1;
        this.friendListData = []
        this.friendListData1 = []
        this.friendListData2 = []

        this.$refs.headerWxRef.style.height = '80px';
        this.searchText = '更多',
            this.searchIcon = 'el-icon-arrow-down'
        if(this.titleName=='微信'){
            this.onSearch1();
        }else{
            this.onSearch2();
        }
    },
    showDetList(){
        this.offset =1;
        this.groupOffset =1;
        this.friendListData = []
        this.friendListData1 = []
        this.friendListData2 = []
        switch (this.formType) {
            case '默认':
            this.showDel = 0;
                break;
                case '反序':
            this.showDel = 1;
                break;
                case '按删除数量':
            this.showDel = 2;
                break;
                case '按消息数量':
            this.showDel = 3;
                break;
            default:
                break;
        }
        this.$refs.headerWxRef.style.height = '80px';
        this.searchText = '更多',
            this.searchIcon = 'el-icon-arrow-down'
        if(this.titleName=='微信'){
            this.onSearch1();
        }else{
            this.onSearch2();
        }
    },
    openSearchAllBox(){
        switch (this.searchText) {
            case '更多':
            this.$refs.headerWxRef.style.height = '280px';
            this.searchText = '收起',
            this.searchIcon = 'el-icon-arrow-up'
                break;
            case '收起':
            this.$refs.headerWxRef.style.height = '80px';
            this.searchText = '更多',
            this.searchIcon = 'el-icon-arrow-down'
                break;

            default:
                break;
        }
    },
    closeSearchBoxModel(){
        this.showSearchList=false;
        this.searchWxShow=false;
    },
    openContantInfo(item){
        this.contantData = item;
        this.accountInfoDetailsShow = true;
    },
    searchDetailsListData(item){
        this.showSearchList = true;
        this.showSearchContentList = true;
        this.searchScrollTop = this.$refs.searchListRef.scrollTop;

        this.searchWxShow = false;
        this.chatWithObj = item;
        this.messageSearchWord = this.searchWord
        this.searchWeChatMessageAll(item)
    },
    searchDetailsListDataQun(item){
        this.showSearchList = true;
        this.showSearchContentList = true;
        this.searchScrollTop = this.$refs.qunSearchRef.scrollTop;
        this.searchQun = false;
        this.chatWithObj = item;
        this.messageSearchWord = this.searchWord1
        this.searchWeChatMessageAll(item);
    },
    getRefsAff(){
      return  this.$refs.weChatRef;
    },
    viewsQunCY(data){
        this.initQunList(data)
        this.visibleGroup = true;
    },
    initQunList(item){
      let data={
        proof_num:this.chatWithObj.proof_num,
        groupid:this.chatWithObj.groupid,
        searchkey:this.searchkeyModal,
        offset:1,
        limit:1000,
      }
      getWeChatGroup_number(data).then(res=>{
        this.tableData=res.data;
      })
    },
    domFunction(){
    return this.$refs.weChatRef
    },
    flyRemarkMessageItem(item){
        if(this.showSearchContentList){
            this.scrpllTopSearchContent = this.$refs.searchContentInRef.scrollTop;
            this.weChatContentShow = true;
        }
        switch (this.titleName) {
            case '微信':
            this.$refs.wechatBox.flayRemark(item,this.sendData.proof_num,1);
            this.showSearchList = false;
                break;
            case '群组':
            this.$refs.wechatGroupBox.flayRemarkGrop(item)
            this.showSearchList = false;
            break;
            default:
                break;
        }
    },
        formateDate(date){
            return parseTime(date);
        },
        highlight(text, keyword) {
            let str = text;
            try {
            let newStr = str.replace(keyword, `<span class='highlight' style="color:red;">${keyword}</span>`);
            return newStr
            } catch (error) {
                return str;
            }
        },
        blackMessageList(){

            if(this.showSearchContentList){
                this.showMessage = false;
                this.showSearchList = false;
                this.showSearchContentList = false
                switch (this.titleName) {
                case '微信':
                    // this.onSearchStart1();
                this.searchWxShow = true;
                    break;
                case '群组':
                    // this.onSearchStart2();
                    this.searchQun = true
                    break;
                default:
                    break;
            }
              this.$nextTick(() => {
                this.$refs.searchListRef.scrollTop = this.searchScrollTop
              })
            }else{
                this.showSearchList = false;
                this.showMessage = true;
            }
        },

        searchWeChatMessageAll(item){
            this.showMessage = true;
            switch (this.titleName) {
                case '微信':
                let data='';

                    data={
                        proof_num:this.sendData.proof_num,
                        account_id:item.account_id,
                        contactid:item.username,
                        model:'wechat',
                        recovery:this.recovery,
                        searchkey:this.messageSearchWord,
                        offset:this.offset,
                        limit:2000,
                        searchStartTime:(this.searchStartTime?this.searchStartTime:0)/1000,
                        searchEndTime:(this.searchEndTime?this.searchEndTime/1000:1999999999),
                        selectld:this.selectld,
                        selectType:this.selectType, //0下1上
                        selectTime:this.selectTime,
                        isExistsSelectID:this.isExistsSelectID
                    }

                    searchFunction(data,'/search/tencent/content_new').then(res=>{
                        this.searchMessageListData = res.data;
                        this.showSearchList = true;
                        this.showSearchBox = false;
                    })
                    break;
                case '群组':
                let data1='';
                    data1={
                    proof_num:this.chatWithObj.proof_num,
                    account_id:this.chatWithObj.account_id,
                    contactid:this.chatWithObj.groupname,
                    model:'wechat',
                    recovery:this.recovery,
                    searchkey:this.messageSearchWord,
                    limit:2000,
                    searchStartTime:(this.searchStartTime?this.searchStartTime:0)/1000,
                    searchEndTime:(this.searchEndTime?this.searchEndTime/1000:1999999999),
                    selectId:this.selectld,
                    selectType:this.selectType, //0下1上
                    selectTime:this.selectTime,
                    isExistsSelectID:this.isExistsSelectID
                    }

                    searchFunction(data1,'/search/tencent/content_new').then(res=>{
                        this.searchMessageListData = res.data;
                        this.showSearchList = true;
                        this.showSearchBox = false;
                    })
                break;

                default:
                    break;
            }

        },
        searchWeChatMessage(){
            this.weChatContentShow = false;
            this.showSearchList = false;
            switch (this.titleName) {
                case '微信':
                let data='';

                    data = {
                        proof_num:this.chatWithObj.proof_num,
                        account_id:this.chatWithObj.account_id,
                        contactid:this.chatWithObj.username,
                        model:'wechat',
                        recovery:this.recovery,
                        searchkey:this.messageSearchWord,
                        offset:this.offset,
                        limit:this.limit,
                        searchStartTime:(this.searchStartTime?this.searchStartTime:0)/1000,
                        searchEndTime:(this.searchEndTime?this.searchEndTime/1000:1999999999),
                        selectld:this.selectld,
                        selectType:this.selectType, //0下1上
                        selectTime:this.selectTime,
                        isExistsSelectID:this.isExistsSelectID
                    }

                    searchFunction(data,'/search/tencent/content_new').then(res=>{
                        this.searchMessageListData = res.data;
                        this.showSearchList = true;
                        this.showSearchBox = false;
                    })
                    break;
                case '群组':
                let data1='';

                    data1={
                        proof_num:this.chatWithObj.proof_num,
                        account_id:this.chatWithObj.account_id,
                        contactid:this.chatWithObj.groupname,
                        model:'wechat',
                        recovery:this.recovery,
                        searchkey:this.messageSearchWord,
                        limit:this.limit,
                        searchStartTime:(this.searchStartTime?this.searchStartTime:0)/1000,
                        searchEndTime:(this.searchEndTime?this.searchEndTime/1000:1999999999),
                        selectId:this.selectld,
                        selectType:this.selectType, //0下1上
                        selectTime:this.selectTime,
                        isExistsSelectID:this.isExistsSelectID
                    }

                    searchFunction(data1,'/search/tencent/content_new').then(res=>{
                        this.searchMessageListData = res.data;
                        this.showSearchList = true;
                        this.showSearchBox = false;
                    })
                break;

                default:
                    break;
            }

        },
        handleClickOutside(event) {
            try {
                if (!this.$refs.myDiv.contains(event.target)) {
                // 在这里处理点击除元素外的其他地方触发事件的逻辑
                if(event.target._prevClass !=='el-icon-search' && event.target._prevClass !=='searchWX'){
                    this.showSearchBox = false;
                }else{
                    this.showSearchBox = !this.showSearchBox;
                }
            }
            } catch (error) {

            }
        },
        openSearch(){
            this.showSearchBox = this.showSearchBox;
        },
        throttleFn: throttle(function() {
            // 获取列表元素
            const list = this.$refs.lianxiren;
            // 判断滚动到底部
            if (list.scrollTop + list.clientHeight+10 >= list.scrollHeight) {
                this.showLoading=true;

                if(this.friendListData.length<this.total){
                    this.loadClass = 'el-icon-loading';
                    this.loadingText = '正在加载. . .';

                // 加载更多数据
                let that = this;
                setTimeout(()=>{
                    switch (that.titleName) {
                        case '微信':
                        that.offset++;
                        that.onSearch1();
                            break;
                        case '群组':
                        that.groupOffset++
                        that.onSearch2();
                            break;
                        case '公众号':
                        that.publicOffset++
                        that.onSearch3();
                            break;

                        default:
                            break;
                    }
                },1000)
                }else{
                this.loadClass = 'el-icon-success';
                this.loadingText = '到底了，没有更多了！';
                }
            }
        },1000),
     handleScroll(){
      // 获取列表元素
      const list = this.$refs.lianxiren;
      // 判断滚动到底部
      if (list.scrollTop + list.clientHeight+10 >= list.scrollHeight) {
            this.showLoading=true;

        if(this.friendListData.length<this.total){
          this.loadClass = 'el-icon-loading';
          this.loadingText = '正在加载. . .';
          // 加载更多数据
          let that = this;
          setTimeout(()=>{
            switch (that.titleName) {
                case '微信':
                that.offset++;
                that.onSearch1();
                    break;
                case '群组':
                that.offset++;
                that.onSearch2();
                    break;
                case '公众号':
                that.onSearch3();
                    break;

                default:
                    break;
            }
          },1000)
        }else{
          this.loadClass = 'el-icon-success';
          this.loadingText = '到底了，没有更多了！';
        }
      }
    },
      onSearch2() {
        if(sessionStorage.getItem('searchAll')!==null){
            this.searchWord1 = sessionStorage.getItem('searchAll');
            this.onSearchStart2()
        }
      let data={
        proof_num:this.sendData.proof_num,
        account_id:Number(this.sendData.account_id),
        searchkey:this.searchWord1,
        offset:this.groupOffset,
        model:this.sendData.model,
        limit:this.groupLimit,
        sortBy:this.showDel,
        msgNum:this.msgNum=='默认'?0:1,
      }
      searchFunction(data,'/search/tencent/group_new').then(res=>{
        if(res.data.length == 0){
            this.showLoading = true;
            this.loadClass = 'el-icon-success';
            this.loadingText = '到底了，没有更多了！';
            return;
        }
        for (let index = 0; index < res.data.length; index++) {
            const element = res.data[index];
          this.friendListData1.push(element)
        }

        this.total=res.data[0].totle
        if(this.sendData.list_offset){
            let d = JSON.parse(sessionStorage.getItem('only'))
        if(this.sendData.app_name=='群组' &&  d == true){
                this.friendListData1.forEach(element=>{
                    if(element.groupname==this.sendData.contact_username){

                        this.opemMessageGroupDetials(element,0,this.sendData.msg_offset,this.sendData.msgtime,this.sendData.id)
                        sessionStorage.setItem('only',false)
                    }
                    })

                }else{

                }
            }
      })
    },
    // 微信搜索
    onSearchStart1(){
        this.$refs.headerWxRef.style.height = '80px';
        this.searchText = '更多',
            this.searchIcon = 'el-icon-arrow-down'
        // this.friendListData = []
        this.showInpruWeChat = true;
        let that = this;
        setTimeout(()=>{
            that.showInpruWeChat = false;
        },1000)
        if(this.searchWord=='' && this.searchStartTime == '' && this.searchEndTime == ''){
            this.friendListData = [];
            this.onSearch1();
            return;
        }
        if(sessionStorage.getItem('searchStorage')!==null && this.searchWord==sessionStorage.getItem('searchKey') && sessionStorage.getItem('searchKey')!==null && this.searchStartTime == sessionStorage.getItem('searchStartTime') && this.searchEndTime == sessionStorage.getItem('searchEndTime')){

            sessionStorage.getItem('searchStorage')['msgNum'] = this.msgNum=='默认'?0:1
            let data = JSON.parse(sessionStorage.getItem('searchStorage'))
            this.searchAllListContant = data.contact;
            this.searchAllListContent = data.content;
            this.searchWxShow = true;
            this.$nextTick(() => {
                this.$refs.searchListRef.scrollTop = this.searchScrollTop
              })
            return;
        }else{
            let data =  {
            proof_num:this.sendData.proof_num,
            account_id:Number(this.sendData.account_id),
            searchStartTime:(this.searchStartTime?this.searchStartTime:0)/1000,
            searchEndTime:(this.searchEndTime?this.searchEndTime/1000:1999999999),
            model:this.sendData.model,
            searchkey:this.searchWord,
            msgNum:this.msgNum=='默认'?0:1
        }
        getAllSearchApi(data).then(res=>{
            sessionStorage.setItem('searchStorage',JSON.stringify(res.data[0]))

            // sessionStorage.setItem('searchKey',this.searchWord)
            sessionStorage.setItem('searchStartTime',this.searchStartTime);
            sessionStorage.setItem('searchEndTime',this.searchEndTime);
            this.searchAllListContant = res.data[0].contact;
            this.searchAllListContent = res.data[0].content;
            this.searchWxShow = true;
            this.$nextTick(() => {
                this.$refs.searchListRef.scrollTop = this.searchScrollTop
            })
        })
        }
    },
    onSearchStart2(){
        // this.friendListData1 = []

        if(this.searchWord1=='' && this.searchStartTime == '' && this.searchEndTime == ''){
            this.friendListData1 = []
            this.onSearch2();
            return;
        }

        if(sessionStorage.getItem('searchStorageQun')!==null && this.searchWord==sessionStorage.getItem('searchKeyQun') && sessionStorage.getItem('searchKeyQun')!==null && this.searchStartTime == sessionStorage.getItem('searchStartTime') && this.searchEndTime == sessionStorage.getItem('searchEndTime')){
            let data = JSON.parse(sessionStorage.getItem('searchStorageQun'))
            this.searchAllListContantQ = data.contact;
            this.searchAllListContentQ = data.content;
            this.searchQun = true;
            this.$nextTick(() => {
                this.$refs.qunSearchRef.scrollTop = this.searchScrollTop
              })
            return;
        }else{
            let data =  {
            proof_num:this.sendData.proof_num,
            account_id:Number(this.sendData.account_id),
            searchStartTime:(this.searchStartTime?this.searchStartTime:0)/1000,
            searchEndTime:(this.searchEndTime?this.searchEndTime/1000:1999999999),
            model:this.sendData.model,
            searchkey:this.searchWord1
        }
        getAllSearchQunApi(data).then(res=>{
            sessionStorage.setItem('searchStorageQun',JSON.stringify(res.data[0]))
            sessionStorage.setItem('searchKeyQun',this.searchWord1)
            sessionStorage.setItem('searchStartTime',this.searchStartTime);
            sessionStorage.setItem('searchEndTime',this.searchEndTime);
            this.searchAllListContantQ = res.data[0].contact;
            this.searchAllListContentQ = res.data[0].content;
            this.searchQun = true;
            this.$nextTick(() => {
                this.$refs.qunSearchRef.scrollTop = this.searchScrollTop
              })
        })
        }
    },
    onSearchStart3(){
        this.friendListData2 = []
        this.loadClass = 'el-icon-success';
        this.loadingText = '到底了，没有更多了！';
        this.publicOffset = 1
        this.onSearch3()
    },

    // 查看微信好友聊天
    checkWeChatMessage(item,number,offset,time,id){
      this.showMessage = true;
      this.offsetLimit={
        offset:this.offset,
        limit:this.limit,
        label:this.sendData.label,
        msg_offset:offset,
        recovery:this.sendData.recovery,
        msgtime:time,
        id:id
      }
      this.recovery=number
      this.$store.commit('SET_WECHATMESSAGE',Date.parse(new Date()));
      this.chatWithObj=item
      sessionStorage.setItem('flag','friend')
    },
    // 查看群组聊天
    opemMessageGroupDetials(item,number,offset,time,id){
        this.weChatContentShow = false;
        this.showMessage = true;
        this.offsetLimit={
            offset:this.groupOffset,
            limit:this.groupLimit,
            label:this.sendData.label,
            msg_offset:offset,
            recovery:this.sendData.recovery,
            msgtime:time,
            id:id
        }
      // return
      this.recovery=number
      sessionStorage.setItem('flag','group')
      this.$store.commit('SET_WECHATGROUPMESSAGE',Date.parse(new Date()))
      this.chatWithObj=item
    },
    // 查看公众号聊天
    viewsPublicMessage(item,number){
      this.showMessage = true;
      this.recovery=number
      sessionStorage.setItem('flag','public')
      this.$store.commit('SET_WECHATPUBLICMESSAGE',Date.parse(new Date()))
      this.chatWithObj=item
    },
    // 初始化请求     账号信息
    init(){
        sessionStorage.setItem('usernameTitle',this.sendData.username)
        let data={
            proof_num:this.sendData.proof_num,
            account_id:Number(this.sendData.account_id),
            username:this.sendData.username,
            model:this.sendData.model
        }
        getWeChatAccountInfo(data).then(res=>{
            this.accountData=res.data[0];
            sessionStorage.setItem('userAvatar',this.accountData.avatar);
            this.onSearch1();
        })
    },
    onSearch1(b) {
       if(sessionStorage.getItem('searchAll')!==null){
            this.searchWord = sessionStorage.getItem('searchAll')
            this.onSearchStart1()
       }
        this.showSearchBox = false;
        let data={
            proof_num:this.sendData.proof_num,
            account_id:Number(this.sendData.account_id),
            searchkey:this.searchWord,
            model:this.sendData.model,
            sortBy:this.showDel,
            msgNum:this.msgNum=='默认'?0:1,
            offset:this.offset,
            limit:this.limit<=0?15:this.limit
        }

      searchFunction(data,'/search/tencent/contact_new').then(res=>{
        this.showLoading=false;
        console.log('=============',res.data.length);
        if(res.data.length == 0){
            this.showLoading=true;
            this.loadClass = 'el-icon-success';
            this.loadingText = '到底了，没有更多了！';
            return;
        }
        for (let index = 0; index < res.data.length; index++) {
            const element = res.data[index];
          this.friendListData.push(element)
        }

        this.total=res.data[0].totle;
        if(this.sendData.list_offset){
            let d = JSON.parse(sessionStorage.getItem('only'))
            //跳转为分析名称中含关键字不跳转到内容
            if(this.sendData.type == 1){
                this.showMessage = false;
            }else{
                if(this.sendData.app_name=='好友' &&  d == true){
          this.friendListData.forEach(element=>{
            if(element.username==this.sendData.contact_username){
              this.checkWeChatMessage(element,0,this.sendData.msg_offset,this.sendData.msgtime,this.sendData.id)
                this.showMessage = true;
                sessionStorage.setItem('only',false)
            }
          })

        }else{

        }
            }

    }
      }).catch(err=>{
      })
    },
    onSearch3() {
      if(sessionStorage.getItem('searchAll')!==null){
          this.searchWord2 = sessionStorage.getItem('searchAll');
      }
      let data={
        proof_num:this.sendData.proof_num,
        account_id:Number(this.sendData.account_id),
        searchkey:this.searchWord2,
        model:this.sendData.model,
        offset:this.publicOffset,
        limit:this.publicLimit
      }
      searchFunction(data,'/search/tencent/officialaccounts').then(res=>{
        if(res.data.length == 0){
            this.showLoading = true;
            this.loadClass = 'el-icon-success';
            this.loadingText = '到底了，没有更多了！';
            return;
        }
        for (let index = 0; index < res.data.length; index++) {
            const element = res.data[index];
          this.friendListData2.push(element)
        }
        this.total=res.data[0].totle
      })
    },
     openContent(number){
        this.showDel = 0;
        this.formType = '默认';
        this.searchScrollTop = 0;
        this.friendListData = [];
        this.friendListData1 = [];
        this.friendListData2 = [];

        this.weChatContentShow=false
        this.offset = 1;
        this.groupOffset = 1;
        this.publicOffset = 1;
            switch (number) {
                case '微信':
                this.show=true;
                this.titleName = '微信'
                this.src = require('../../../assets/wechataction.png');

                this.srcSelf=require('../../../assets/self.png');
                this.srcQun = require('../../../assets/图标/微信加/微信群.png');
                this.srcPublic = require('../../../assets/图标/微信加/微信公众号.png');
                this.searchWord1 = ''
                this.init();
                    break;
                case '我的':
                this.show=false;
                this.titleName = '我的'
                this.srcSelf=require('../../../assets/selfaction.png');

                this.src = require('../../../assets/wechat.png');
                this.srcQun = require('../../../assets/图标/微信加/微信群.png');
                this.srcPublic = require('../../../assets/图标/微信加/微信公众号.png');
                    break;
                case '群组':
                this.titleName = '群组'
                this.show=true;
                this.srcQun=require('../../../assets/图标/微信加/微信群绿色.png');

                this.src = require('../../../assets/wechat.png');
                this.srcSelf=require('../../../assets/self.png');
                this.srcPublic = require('../../../assets/图标/微信加/微信公众号.png');
                this.searchWord = ''
                this.onSearch2();
                    break;
                case '公众号':
                this.titleName = '公众号'
                this.show=true;
                this.srcPublic = require('../../../assets/图标/微信加/微信公众号绿色.png');

                this.src = require('../../../assets/wechat.png');
                this.srcSelf=require('../../../assets/self.png');
                this.srcQun=require('../../../assets/图标/微信加/微信群.png');
                this.onSearch3();
                    break;

                default:
                    break;
            }
        },
        opemMessageDetials(item,number,offset,show){
            if(show){
                this.searchUser = true;
              this.searchScrollTop = this.$refs.searchListRef.scrollTop;
            }
            this.searchQun =false;
            this.weChatContentShow = false;
            try {
            this.searchScrollTop = this.$refs.searchListRef.scrollTop;
            } catch (error) {

            }

            this.searchWxShow = false;

            this.showMessage = true;
            this.offsetLimit={
                offset:this.offset,
                limit:this.limit,
                label:this.sendData.label,
                msg_offset:offset,
                recovery:this.sendData.recovery,
                searchStartTime:(this.searchStartTime?this.searchStartTime:0)/1000,
                searchEndTime:(this.searchEndTime?this.searchEndTime/1000:1999999999),
            }
            this.contantData = item;
            sessionStorage.setItem('recovery',number)
            this.recovery=number
            this.$store.commit('SET_WECHATMESSAGE',Date.parse(new Date()));
            this.chatWithObj=item
            sessionStorage.setItem('flag','friend')
            if(sessionStorage.getItem('searchAll')!==null){
                this.messageSearchWord = sessionStorage.getItem('searchAll');
                this.searchWeChatMessage()
            }
        },
        black(){
            if(this.titleName == '微信'){
                this.$refs.wechatBox.stopCurrentAudio();
            }else if(this.titleName == '群组'){
                this.$refs.wechatGroupBox.stopCurrentAudio();
            }
            // 判断是否为子节点来向
            if(this.sendData.wxChildrenNode){
                let item = {};
                item['proof_num'] = this.sendData.proof_num;
                item['model'] = this.sendData.childrenModel;
                item['list_offset'] = this.sendData.list_offset;
                item['msg_offset'] = 1;
                item['wxChildrenNode'] = true;
                item['scrollTop'] = this.sendData.scrollTop;
                item['account_id'] = this.sendData.account_id;

                switch (this.sendData.childrenModel) {
                    case 'WXaudio':
                    sessionStorage.setItem('model',"WXaudio")
                        break;
                    case 'WXfile':
                    sessionStorage.setItem('model',"WXfile")
                        break;
                    case 'WXvideo':
                    sessionStorage.setItem('model',"WXvideo")
                        break;
                    case 'WXimg':
                    sessionStorage.setItem('model',"WXimg")
                        break;
                    case 'transfer':
                    sessionStorage.setItem('model',"transfer")
                        break;
                    case 'position':

                    sessionStorage.setItem('model',"position")
                    default:
                        break;
                }
                // 储存节点数据
                sessionStorage.setItem('sumData',JSON.stringify(item))
                // 激活跳转组件
                this.$store.commit('SET_ORDERDATA',Date.parse(new Date()))
                sessionStorage.setItem('only',true);
            }

            if(this.weChatContentShow){
                this.showSearchList = true;
            this.$nextTick(() => {
                this.$refs.searchContentInRef.scrollTop = this.scrpllTopSearchContent;
            })
            }else if(this.searchUser){
              this.showMessage = false;
              this.searchWxShow = true;
              this.$nextTick(() => {
                this.$refs.searchListRef.scrollTop = this.searchScrollTop;
              })
              this.searchUser = false;
            }else{
                this.showSearchList = false;
                switch (this.titleName) {
                case '微信':
                    // this.offset = 1
                    // this.friendListData=[];
                    // this.onSearchStart1();
                    break;
                case '群组':
                    // this.groupOffset = 1
                    // this.friendListData1=[];
                    // this.onSearchStart2();
                    break;
                default:
                    break;
            }
            this.showMessage = false;
            this.messageSearchWord = ''
            
            }
            this.$refs.wechatPublicBox.loadingText='';
            this.$refs.wechatPublicBox.loadClass='';
        }
    }
}
</script>


<style>
.ant-modal{
    top:20px !important;
}
</style>

<style scoped>
.wxAppText{
    text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;	
	display: -webkit-box;	
	-webkit-line-clamp: 2;	
	line-clamp: 2;		
	-webkit-box-orient: vertical;
}
    .topWxFBox{
        background: url('https://img2.baidu.com/it/u=1840828656,940167964&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=625');
        background-size: 100% 100%;
        background: cover;

    }

    .topWxFBox{-webkit-animation:kenburns-top 5s ease-out both;animation:kenburns-top 5s ease-out both}

    @-webkit-keyframes kenburns-top{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0);-webkit-transform-origin:50% 16%;transform-origin:50% 16%}100%{-webkit-transform:scale(1.25) translateY(-15px);transform:scale(1.25) translateY(-15px);-webkit-transform-origin:top;transform-origin:top}}@keyframes kenburns-top{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0);-webkit-transform-origin:50% 16%;transform-origin:50% 16%}100%{-webkit-transform:scale(1.25) translateY(-15px);transform:scale(1.25) translateY(-15px);-webkit-transform-origin:top;transform-origin:top}}
    .shouCang:hover{
        font-weight: bold;
        color: #38c5f9;
    }
    ::-webkit-scrollbar {
        width: 4px;
        height: 10px;
    }
    ::-webkit-scrollbar-button {
        background-color: rgb(255, 255, 255);
    }

    ::-webkit-scrollbar-track-piece {
        background: rgb(230, 230, 230);
    }

    ::-webkit-scrollbar-thumb {
        background: rgb(194, 194, 196);
        border-radius: 4px;
    }
    .pengyouquan:hover{
        color:#38c5f9;
        font-weight: 1000;
    }
    .pengyouquan > img {
        transform: rotate(0deg); /* 默认状态下不旋转 */
        transition: transform 0.3s ease; /* 添加默认的过渡效果 */
    }
.pengyouquan:hover>img{
    width: 20px;
    height: 20px;
    transform:rotate(180deg);
}
.searchContentBox{
    height: 100%;
    overflow-y: auto;
    padding-bottom: 100px;
}
.searchContentBox::-webkit-scrollbar {
  width: 10px;
}
/* <!--修改 滚动条的 下面 的 样式--> */
.searchContentBox::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/* <!--修改 滑块 --> */
.searchContentBox::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.a_modalClass::-webkit-scrollbar {
  width: 10px;
}
/* <!--修改 滚动条的 下面 的 样式--> */
.a_modalClass::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/* <!--修改 滑块 --> */
.a_modalClass::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.highlight {
  color: red;
}
.remarkListItem{
    cursor: pointer;
    display: flex;
    height: 70px;
    border-bottom: 1px solid #e9e9e9;
    padding: 0 10px;
    /* justify-content: space-between; */
    align-items: center;
}
.searchInputWX{
    margin-top: 20px;

}

.headerMessage{
    height: 50px;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    font-size: 20px;
    position: relative;
}
.searchWX{
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
}
.searchWX:hover{
    color: #38c5f9;
    font-weight: bold;
}
.searchWXContent{
    width: 100%;
    height: 100px;
    background: #f5f5f5;
    /* border: 1px solid red; */
    position: absolute;
    top: 50px;
    padding: 5px 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    z-index:1000;
}
.list>div{
    padding-left:20px;
}
.selfInfo{
    height: 170px;

    padding: 10px 20px;
    display: flex;
    align-items: center;
}
.headerWX{
    height: 80px;
    border-bottom: 1px solid rgb(224, 224, 224);
    z-index: 1000;
    width: 100%;
    background: #fff;
    overflow: hidden;
    flex-shrink: 0;
}
.dateTime{
    position: absolute;
    top: 14px;
    right: 10px;
    color: #bdbdbd;
}
.textwx{
    font-size: 12px;
    width: 180px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.wxUserItem{
    height: 70px;
    border-bottom: 1px solid rgb(242, 242, 242);
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
}
.wxUserItem:hover{
    background: #eeeeee;
}
.contentBoxWx{
    position: relative;
    height: calc(100% - 80px);
    overflow-y: auto;
    width: 100%;
    background: #fff;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #c0c0c0 rgb(252, 252, 252);
    padding-bottom:200px;
}

.contentBoxWx::-webkit-scrollbar {
  width: 10px;
}
/* <!--修改 滚动条的 下面 的 样式--> */
.contentBoxWx::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/* <!--修改 滑块 --> */
.contentBoxWx::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.flooterBox{
    display: flex;
    padding: 10px 0;
    border-top: 1px solid #e4e4e4;
    flex-shrink: 0;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 1000;
    height:80px;
}
.btn2{
    width: 25%;
    text-align: center;
    cursor: pointer;
}
.btn2>img{
    display: block;
    margin:0 auto;
}

</style>
